<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" width="640px" top="0" append-to-body>
		<el-form v-bind="formConfig" :model="formData" :rules="formRules" label-width="84px">
			<el-row :gutter="16" v-loading="loading">
				<el-col :span="12">
					<el-form-item label="用户姓名" prop="userName">
						<el-input v-model="formData.userName" placeholder="请输入用户昵称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电子邮箱" prop="account">
						<el-input v-model="formData.account" placeholder="请输入电子邮箱"></el-input>
					</el-form-item>
				</el-col>
				<template v-if="addOrEdit">
					<el-col :span="12">
						<el-form-item label="用户密码" prop="password">
							<el-input v-model="formData.password" show-password placeholder="请输入用户密码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="确认密码" prop="confirmpass">
							<el-input v-model="formData.confirmpass" show-password placeholder="请输入确认密码"></el-input>
						</el-form-item>
					</el-col>
				</template>
				<el-col :span="12">
					<el-form-item label="用户性别" prop="sex">
						<sw-dict-radio v-model="formData.sex" dict-name="USER_SEX"></sw-dict-radio>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出生日期" prop="birthDate">
						<el-date-picker
							v-model="formData.birthDate"
							type="date"
							placeholder="请选择出生日期"
							value-format="yyyy-MM-dd"
							style="width: 100%"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户民族" prop="ethnic">
						<nation-select v-model="formData.ethnic" placeholder="请选择用户民族" style="width: 100%"></nation-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系电话" prop="phone">
						<sw-custom-input v-model="formData.phone" input-type="number" maxLength="11" placeholder="请输入联系电话" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户职称" prop="filed1">
						<sw-dict-select v-model="formData.filed1" dict-name="USER_POST" :props="dictProps" placeholder="请选择用户职称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户单位" prop="filed2">
						<el-input v-model="formData.filed2" placeholder="输入用户单位"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="单位类型" prop="filed3">
						<sw-dict-select v-model="formData.filed3" dict-name="DEPART_TYPE" :props="dictProps" placeholder="请选择单位类型" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="单位属性" prop="filed4">
						<sw-dict-select v-model="formData.filed4" dict-name="DEPART_ATTRS" :props="dictProps" placeholder="选择单位属性" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitForm()">{{ formTypeName }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import rsa from '@/utils/rsa';
import { mapGetters } from 'vuex';
import formMixins from '@/mixins/formMixins';
import nationSelect from '@/components/nationSelect';
import { getUserList, addedUser, updateUser, auditUser } from '@/api/system/tbSysUser';
export default {
	mixins: [formMixins],
	components: { nationSelect },
	data() {
		const passRule = this.$getPassRules();
		const passValidator = (rule, value, callback) => {
			if (!this.formData.password) {
				callback(new Error('请输入用户密码'));
			} else if (this.formData.password !== value) {
				callback(new Error('用户密码和确认密码不一致'));
			} else {
				callback();
			}
		};
		return {
			formName: '用户',
			formRules: {
				account: [
					{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的电子邮箱', trigger: 'blur' }
				],
				userName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入用户密码', trigger: 'blur' },
					{ pattern: passRule.rules, message: passRule.message, trigger: 'blur' }
				],
				confirmpass: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{ validator: passValidator, trigger: 'blur' }
				],
				phone: [
					{ required: true, message: '请输入联系电话', trigger: 'blur' },
					{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3-9]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
				],
				role: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
				filed1: [{ required: true, message: '请选择用户职称', trigger: 'change' }],
				filed2: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
				filed3: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
				filed4: [{ required: true, message: '请选择单位属性', trigger: 'change' }]
			},
			roleListData: [],
			btnLoading: false,
			dictProps: { label: 'msg', value: 'msg' }
		};
	},
	computed: {
		detailData() {
			return eval(getUserList);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedUser : updateUser);
		},
		requestParams() {
			return { page: 1, limit: 1, id: this.dataId };
		}
	},
	methods: {
		//获取用户详情
		formatFormParams(data) {
			console.log(data);
		}
	}
};
</script>
<style lang="scss"></style>
